<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>KING OF SPADES Register</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta id="i18n_pagename" content="member">
    <link rel="stylesheet" href="../admin/assets/css/weui.css">
    <link rel="stylesheet" href="../admin/assets/css/weui2.css">
<!--    <script src="../admin/assets/js/zepto.min.js"></script>-->
    <script src="../admin/assets/libs/layui/layui.js"></script>
    <script src="../admin/assets/js/zepto.min.js"></script>
</head>
<style>
    .weui_cells::before {
        border: none;
    }

    .weui_cells:after {
        border: none;
    }

    .weui_cell::before {
        border: none;
    }

    .weui_cell {
        padding: 10px 0px;
    }

    .weui_cell_border {
        border-top: none;
        border-bottom: 1px solid #d9d9d9;
        height: 2em;
    }

    .weui_cell_icon {
        width: 25px;
        margin-right: 5px;
        display: block;
    }

    .weui_btn_area {
        margin: 8.176471em 15px .3em;
    }

    .weui_btn {
        border-radius: 40px;
    }

    .layui-form-item {
        /*line-height: 3em;*/
        width:70%;
        margin: 0 auto;
    }

    input {
        margin: 0;
        padding: 0;
        color: white;
        border: 0;
        background-color: black;
        outline: none;
        width: 100%;
        font-size: 16px;
        /*margin-top: 9px;*/
    }
    .login_ipt{
        margin-left: 2rem;
        flex: 1;
    }
    .login_ipt input{
        line-height: 30px;
    }
    .logo {
        display: block;
        max-width: 100%;
    }
    .layui-form-item .layui-input-block{
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        /*align-items: center;*/
        padding: 15px 0;
        border-bottom: 1px solid #44465D;
    }
    .layui-form-item .layui-input-block .logo_icon{
        height: 24px;
        width: 24px;
    }
    .language{
        line-height: 30px;
        color: white;
        border: 0;
        background-color: black;
        float: right;
        margin-top: 10px;
        -webkit-appearance: none;
        margin-right: 13px;
    }
</style>
<body ontouchstart style="background-color: #000;">
<div style="margin-top: 10px;color: white;text-align: center;font-size: 23px;">
    <label style="margin-left: 20%;" class="i18n" name="member.register"></label>
    <select id="language"  class="language">
        <option value="zh_CN">中文简体</option>
        <option value="en">English</option>
    </select>
</div>
<form lay-filter="registerForm" class="layui-form model-form">
    <div style="padding-top: 8%; ">

        <input name="id" type="hidden"/>
        <input name="type" type="hidden" value="email"/>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <div class="logo_icon">
                    <img class="logo" src="../admin/assets/images/version/email.png"/>
                </div>
               <div class="login_ipt">
                   <input name="identifier" id="identifier" selectname="member.register.email" selectattr="placeholder" type="text" class="layui-input i18n-input" lay-verType="tips"
                          lay-verify="email"
                          required/>
               </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <div class="logo_icon">
                    <img class="logo" src="../admin/assets/images/version/password.png"/>
                </div>
               <div class="login_ipt">
                   <input name="password" selectname="member.register.password" selectattr="placeholder" type="password" class="layui-input i18n-input" lay-verify="required" lay-verType="tips"
                          required/>
               </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <div class="logo_icon">
                    <img class="logo" src="../admin/assets/images/version/captcha.png"/>
                </div>
                <div class="login_ipt">
                    <input style="width: 66%" name="captcha" selectname="member.register.captcha" selectattr="placeholder" type="text" class="layui-input i18n-input" lay-verType="tips"
                           lay-verify="required" required/>
                    <a style="color:#F8B91A;font: 400 13.3333px Arial;margin-top: -40px;margin-right: -18px;font-size: 16px"
                       id="send"><label  class="i18n" name="member.send"></label></a>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <div class="logo_icon">
                    <img class="logo" src="../admin/assets/images/version/code.png"/>
                </div>
                <div class="login_ipt">
                    <input id="inviteCode" name="inviteCode" selectname="member.register.inviteCode" selectattr="placeholder"  type="text" class="layui-input i18n-input"
                           maxlength="20" lay-verify="required" lay-verType="tips"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 2.5rem">
            <button class="weui_btn weui_btn_default" style="color:#000;padding:2px 0;font-size: 18px;background:linear-gradient(0deg,rgba(248,182,23,1),rgba(248,239,87,1));" lay-submit
                    lay-filter="registerFormSubmit"><label  class="i18n" name="member.register"></label>
            </button>
        </div>
    </div>
</form>
</body>
</html>
<script>
    layui.config({
        base: '../admin/assets/module/'
    }).use(['layer', 'form', 'admin', 'config'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var config = layui.config;

        var languageSel = $("#language").val();
        if(languageSel =='en'){
            languageSel = "en_US";
        }
        var inviteCode = admin.getUrlParam("inviteCode");
        if (inviteCode != null && inviteCode !='') {
            $("#inviteCode").val(inviteCode);
        }
        //发送邮箱
        $("#send").click(function () {
            // 获取短信验证码
            console.log($.i18n.prop('member.send'));
            if ($(this).hasClass('disabled')) return;
            var emailVal = $("#identifier").val();
            var target = this;
            if (emailVal == "") {
                layer.msg($.i18n.prop('email.required'), {
                    icon: 2,
                    time: 500
                });
                return;
            }
            $(this).addClass('disabled');
            admin.ajax({
                url: config.base + '/app/login/registerSendMailCaptcha?lang='+languageSel,
                data: {email: emailVal},
                type: 'POST',
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    if (data.code == 200) {
                        layer.msg(data.msg, {
                            icon: 1,
                            time: 1000
                        });
                        // 开始倒计时
                        countdown(target, $.i18n.prop('captcha.regain'));
                    } else {
                        $("#send").removeClass('disabled');
                        layer.msg(data.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                }
            });
        });

        var wait = 60;
        function countdown(obj, msg) {
            obj = $(obj);
            if (wait <= 0) {
                // 禁止再次点击
                obj.removeClass('disabled');
                obj.prop("disabled", false);
                obj.html(msg);
                wait = 60;
            } else {
                if (msg == undefined || msg == null) {
                    msg = obj.html();
                }
                obj.prop("disabled", true);
                obj.html(wait + $.i18n.prop('member.second'));
                wait--;
                setTimeout(function () {
                    countdown(obj, msg)
                }, 1000)
            }
        }
        // 表单提交事件
        form.on('submit(registerFormSubmit)', function (data) {
            layer.load(2);
            admin.ajax({
                url: config.base + '/app/login/register?lang='+languageSel,
                data: data.field,
                type: 'POST',
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    if (data.code == 200) {
                        layer.closeAll('loading');
                        layer.msg(data.msg, {
                            icon: 1,
                            time: 1000
                        });
                        location.replace('success.html');
                    } else {
                        layer.closeAll('loading');
                        layer.msg(data.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                }
            });
            return false;
        });
    });
</script>
<script src="../admin/assets/libs/jquery/jquery-3.2.1.min.js"></script>
<script src="../admin/assets/libs/jquery/jquery.i18n.properties.js"></script>
<script src="../admin/assets/libs/jquery/language.js"></script>